<script>
export default {
  data(){
    return{
      tableData: [],
      userGameRel:{
        userId:'',
        gameId:'',
      },
    }
  },
  methods:{
    Refund(gameId){
      let _this=this;
      _this.userGameRel.gameId=gameId;
      console.log(_this.userGameRel);
      this.$axios.delete('game/deleteUserGameRel',{params:_this.userGameRel}
      ).then(res=>{
        console.log(res);
        _this.$message.success("退货成功");
        _this.loadMyGame();
      }).catch(error=>{
        _this.$message.error(error);
      })
    },
    loadMyGame(){
      let _this=this;
      this.$axios({
        method:'get',
        url:'game/gameListByUserId/'+this.userGameRel.userId,
      }).then(res=>{
        console.log(res.data)
        _this.tableData=res.data.data;
        console.log(_this.tableData)
      }).catch(error=>{
        _this.$message.error(error);
      })

    },
  },
  mounted(){
    this.userGameRel.userId=sessionStorage.getItem('userId');
    this.loadMyGame();
  }

}

</script>

<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      type="index"
      label="序号"
      align="center"
      width="480">
    </el-table-column>
    <el-table-column
      prop="gameName"
      label="拥有的游戏"
      align="center"
      width="480">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      width="480">
      <!--
        scope：可以看做是 Excel 中的所有行的数据
        scope.row
        scope.row.属性名
      -->
      <template slot-scope="scope">
        <center>
        <el-button type="warning" @click="Refund(scope.row.gameId)"icon="el-icon-s-release" size="mini">退款</el-button>
        </center>
      </template>
    </el-table-column>
  </el-table>

  </div>

</template>

<style>

</style>
